<!DOCTYPE html>
<html>

<head>
    <title>{$node.node_title}</title>
    {include file="common/header"/}
    <el-form :inline="true">
        <el-form-item>
            <el-upload class="upload-demo" action="/api/attach/uploadImage" :on-success="handleUploadSuccess"
                :file-list="fileList" :show-file-list="false" :before-upload="beforeUpload" :data="postData"
                v-loading.fullscreen.lock="fullscreenLoading">
                <el-button size="small" type="primary">上传图片</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="postMultDelete">批量删除</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="dataList.data" @selection-change="changeSelection" v-loading="loading">
        <el-table-column type="selection" width="50">
        </el-table-column>
        <el-table-column prop="attach_id" label="ID" width="60">
        </el-table-column>
        <el-table-column label="附件地址">
            <template slot-scope="scope">
                <el-link target="_blank" :href="['/uploads/'+scope.row.attach_path]">{{scope.row.attach_path}}</el-link>
            </template>
        </el-table-column>
        <el-table-column prop="attach_size" label="附件大小" width="100">
        </el-table-column>
        <el-table-column label="附件类型" width="100">
            <template slot-scope="scope">
                <el-tag size="medium" type="warning">{{scope.row.attach_type.toUpperCase()}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
            <template slot-scope="scope">
                <el-link type="danger" @click="clickDelete(scope.row)" :underline="false"><i
                        class="el-icon-delete"></i>删除</el-link>
            </template>
        </el-table-column>

    </el-table>


    <el-pagination @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100,200,500]" :page-size="10"
        layout="total, sizes, prev, pager, next, jumper" background @current-change="changeCurrentPage"
        :current-page="dataList.current_page" :page-count="dataList.last_page" :total="dataList.total">
    </el-pagination>


    {include file="common/footer"/}
    <script>
        new Vue({
            el: '#app',
            data() {
                this.getList();
                return {
                    fullscreenLoading: false,
                    search: {
                        keyword: "",
                        filter: "attach_phone"
                    },
                    loading: true,
                    dataList: [],
                    selectList: [],
                    fileList: [],
                    form: {
                        page: 1,
                        per_page: 10,
                    },
                    postData: PostBase
                }
            },
            methods: {
                handleUploadSuccess(res, file) {
                    this.fullscreenLoading = false;
                    if (res.code == CODE_SUCCESS) {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.getList();
                    } else {
                        this.$message.error(res.msg);
                    }
                },
                beforeUpload(file) {
                    const isImage = file.type === 'image/jpeg' || file.type === 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isImage) {
                        this.$message.error('上传图片只能是 JPG/PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    this.fullscreenLoading = true;
                    return isImage && isLt2M;
                },
                handleSizeChange(per_page) {
                    this.form.per_page = per_page;
                    this.getList();
                },
                time2string(timestamps, formatStr = 'MM-dd hh:mm') {
                    var now = new Date(timestamps * 1000),
                        y = now.getFullYear(),
                        m = now.getMonth() + 1,
                        d = now.getDate();
                    return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
                },
                postMultDelete() {
                    var that = this;
                    if (that.selectList.length == 0) {
                        that.$message.error('未选择任何附件！');
                        return;
                    }
                    this.$confirm('即将删除选中的附件, 是否确认?', '批量删除', {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post('/api/attach/delete', Object.assign({}, PostBase, {
                            attach_id: that.selectList.join(",")
                        }))
                            .then(function (response) {
                                that.getList();
                                if (response.data.code == CODE_SUCCESS) {
                                    that.$message({
                                        message: response.data.msg,
                                        type: 'success'
                                    });
                                } else {
                                    that.$message.error(response.data.msg);
                                }
                            })
                            .catch(function (error) {
                                that.$message.error('服务器内部错误');
                                console.log(error);
                            });
                    }).catch(() => { });
                },
                changeSelection(list) {
                    var that = this;
                    that.selectList = [];
                    for (var index in list) {
                        that.selectList.push(list[index].attach_id);
                    }
                },
                clickAdd() {
                    var that = this;
                    that.formAdd = {};
                    that.dialogFormAdd = true;
                },
                clickDelete(row) {
                    var that = this;
                    this.$confirm('即将删除这个附件, 是否确认?', '删除提醒', {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post('/api/attach/delete', Object.assign({}, PostBase, {
                            attach_id: row.attach_id
                        }))
                            .then(function (response) {
                                that.getList();
                                if (response.data.code == CODE_SUCCESS) {
                                    that.$message({
                                        message: response.data.msg,
                                        type: 'success'
                                    });
                                } else {
                                    that.$message.error(response.data.msg);
                                }
                            })
                            .catch(function (error) {
                                that.$message.error('服务器内部错误');
                                console.log(error);
                            });
                    }).catch(() => { });
                },
                changeCurrentPage(page) {
                    this.form.page = page;
                    this.getList();
                },
                getList() {
                    var that = this;
                    that.loading = true;
                    axios.post('/api/attach/getList', Object.assign({}, PostBase, that.form, that.search))
                        .then(function (response) {
                            that.loading = false;
                            if (response.data.code == CODE_SUCCESS) {
                                that.dataList = response.data.data;
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            that.loading = false;
                            that.$message.error('服务器内部错误');
                            console.log(error);
                        });
                }
            }
        })
    </script>


</html>